<html><head>
    <title>Floating &lt;div&gt; Demo</title>
    <link type="text/css" rel="stylesheet" href="demo.css"/>
</head><body>
<ul>
    <li>Floating &lt;div&gt; Demo</li>
    <li><a href="table.html">Table Demo</a></li>
    <li><a href="list.html">Ordered List Demo</a></li>
    <li><a href="TextAreaDemo.html">TextAreaDemo.java</a></li>
</ul>
<div style="float:left; width:5em; font-family:big">
    This is a floating &lt;div&gt; on the left side. It has a width of 5em.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus ligula nec
velit condimentum a dapibus tellus accumsan. Donec leo lacus, convallis a
consectetur eget, volutpat id metus. Suspendisse sodales scelerisque sapien,
tincidunt bibendum neque mollis a. Donec convallis sodales adipiscing. Nullam
sodales ipsum vel turpis venenatis non adipiscing odio feugiat. Donec vitae
placerat dolor. Nulla facilisi. Ut et dui facilisis tellus scelerisque faucibus.
Nam id neque turpis. Sed rhoncus nisl accumsan ligula ultrices sed volutpat
tortor imperdiet. Etiam nec mi nec nisl sagittis porta. Curabitur vel nisi
vulputate arcu convallis posuere vitae eu metus.</p>
<div style="float:right; width:50%; background-image: url(frame); margin-top: 20px; margin-left: 1em; padding: 20px 5px 5px; color:white; text-align: justify">
<p>Integer ac dui ut massa malesuada ornare. Quisque lacinia, arcu ut rhoncus
ornare, nibh est pulvinar nibh, non vehicula orci tortor a tortor. Mauris ut
nisl mauris, vel mattis libero. Sed aliquet tortor nec nulla pretium rhoncus
ultrices leo convallis. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed at interdum ipsum. Nam sit amet odio
vitae enim tempor vulputate. In feugiat neque ac orci euismod tincidunt.
Maecenas euismod elementum quam, quis tincidunt orci mollis ac. Pellentesque et
lobortis tellus. Nunc elementum pellentesque rhoncus. Pellentesque venenatis
aliquam magna. Suspendisse eu leo purus, non tempor libero. Proin urna enim,
tristique vitae pulvinar eu, hendrerit eu enim. Integer pretium imperdiet auctor.
Praesent turpis magna, hendrerit nec pellentesque at, pulvinar ac risus.
Curabitur at orci tortor. Nulla in magna in elit mattis semper.</p>
<div style="float:left; width:1.2em; padding-right: 5px">
    Hi!
</div>
<p>Cras arcu arcu, auctor nec porttitor eu, sagittis ut leo. Nam vel ipsum vel
metus posuere sagittis. Vestibulum congue fringilla nibh, a ullamcorper magna
blandit ut. Integer in nisl id risus viverra vestibulum a ac eros. Nam odio
justo, lobortis ultricies condimentum quis, vulputate sit amet metus. Cras vel
ipsum quis nisl scelerisque aliquet. Quisque dapibus ultricies mi eu elementum.
Sed sit amet ipsum enim, vitae luctus eros. Fusce viverra risus ut mi rutrum
posuere. Cras facilisis molestie nisl, id faucibus quam dapibus et. Suspendisse
nec ante sem, ac ullamcorper arcu. In hac habitasse platea dictumst. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Integer commodo hendrerit ante scelerisque adipiscing. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce
lobortis, ligula et ultricies rutrum, purus nulla pellentesque odio, vel dictum
ligula erat in enim. Pellentesque tempus feugiat dui ut condimentum. In
vestibulum dolor et nulla volutpat imperdiet. Nulla faucibus, urna eu tincidunt
ornare, nisl sem interdum elit, in dignissim ante mauris eu turpis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<p>In dignissim turpis nec urna aliquam eu pharetra elit viverra. Praesent neque
eros, feugiat fringilla blandit non, iaculis in ligula. Fusce porttitor
tincidunt metus nec consectetur. Sed placerat, odio sed ullamcorper lacinia,
massa risus bibendum turpis, et rutrum neque nulla ut elit. Etiam at magna vel
est aliquet ornare. Sed tempus, turpis eget imperdiet sollicitudin, dolor orci
suscipit quam, a elementum diam tellus in nisi. Donec eleifend erat et nunc
egestas non suscipit libero molestie. Phasellus lacinia bibendum tempus.
<button name="niceValueSlider" style="margin: 3px"/> Sed
felis odio, posuere eget aliquet quis, suscipit in lectus. Nam ultricies augue
vel est venenatis cursus ut et tortor. Nunc risus ante, tristique id fermentum
in, varius a nulla.</p>
<p>Mauris ullamcorper porttitor enim, eu vehicula urna faucibus et. Nulla tristique
tempor fringilla. Donec ut mauris at ligula pellentesque lacinia. Nulla id
tortor at lectus lobortis lobortis a sed risus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Sed convallis augue at sem
vestibulum sit amet lobortis magna feugiat. Mauris in magna vitae odio aliquet
varius a quis enim. Pellentesque posuere pulvinar neque vitae pretium. Aliquam a
condimentum libero. Cras non leo ornare ipsum luctus molestie. Integer non dui
felis, sodales cursus orci. Nulla sit amet dui odio. Mauris vestibulum, ligula
in convallis sodales, enim est egestas dui, tempor faucibus ligula sapien quis
leo. Aenean nec pellentesque lorem.</p>
<div style="float:right; width:3.6em; font-family:big">
    It's me <img src="smiley" alt=":)" style="vertical-align:middle"/>
</div>
<p>Mauris justo tortor, elementum at semper ut, auctor at diam. Aliquam leo tellus,
fermentum sed euismod sed, condimentum id odio. Aenean auctor malesuada diam,
non iaculis lacus adipiscing eu. Pellentesque ac faucibus mi. Vivamus cursus
semper est, et cursus libero consequat a. Mauris et eros nec nisl commodo
pulvinar ut laoreet massa. Sed quis nulla a eros tincidunt sagittis. Ut euismod
libero at lectus venenatis commodo. Suspendisse risus dolor, ornare eget mollis
et, tempor vitae purus. Phasellus eleifend magna at erat dapibus eget laoreet
purus tempus. Maecenas nec nulla mollis quam consectetur interdum ut vitae leo.
Phasellus laoreet, nibh quis vehicula commodo, dolor purus pharetra turpis, at
condimentum nulla arcu vitae diam. Mauris imperdiet ultricies purus nec rhoncus.</p>
<p>In id odio felis. Vivamus auctor ornare nisi sed eleifend. Nunc quam orci,
vestibulum vel varius at, mollis euismod lorem. Nulla interdum porttitor ante,
eu volutpat tellus laoreet in. Aenean magna erat, commodo in pulvinar vitae,
fermentum ac nulla. Suspendisse ac erat neque, eu dapibus purus. Maecenas at
nunc vel nisi consequat porta. Suspendisse lobortis, ipsum ac faucibus tincidunt,
risus urna pulvinar tortor, eget ullamcorper orci dolor et metus. Duis rutrum
diam a nunc porttitor nec luctus risus lacinia. Duis iaculis, arcu vel adipiscing
congue, dui metus molestie orci, eget malesuada est nisi eu est.</p>
</body></html>
